<template>
    <div class="basic-line-chart">
        <div class="basic-line-chart-title">趋势</div>
        <div v-show="isData" id="echart2" class="account-display-echart" ref="gzhLineChart"></div>
        <div v-show="!isData" class="basic-line-chart-title-no-data">暂无数据</div>
    </div>
</template>

<script>
    export default {
        name: 'BasicLineChart',
        data () {
            return {
                initEchart: '',
                list: [],
                isData: true,
                option: {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        top: '20px',
                        width: '500',
                        data: ['新增粉丝', '净增粉丝', '取关新粉丝', '参与粉丝', '完成任务']
                    },
                    grid: {
                        left: '6%',
                        right: '4%',
                        bottom: '3%',
                        width: '500',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    },
                    yAxis: {
                        type: 'value',
                        minInterval: 1
                    },
                    series: [
                        {
                            name: '新增粉丝',
                            type: 'line',
                            data: [],
                            color: '#40a9ff'
                        },
                        {
                            name: '净增粉丝',
                            type: 'line',
                            data: [],
                            color: '#ff688e'
                        },
                        {
                            name: '取关新粉丝',
                            type: 'line',
                            data: [],
                            color: '#ffc71b'
                        },
                        {
                            name: '参与粉丝',
                            type: 'line',
                            data: [],
                            color: '#5ddcb2'
                        },
                        {
                            name: '完成任务',
                            type: 'line',
                            data: [],
                            color: '#9f8ff1'
                        }
                    ]
                }
            }
        },
        methods: {
            init (res) {
                this.list = res.reverse()
                if (res.length > 0) {
                    this.formatData(res)
                    this.initEchart = 'init'
                    this.isData = true
                } else {
                    this.isData = false
                }
                const gzhLineChart = window.echarts.init(this.$refs.gzhLineChart)
                gzhLineChart.setOption(this.option)
            },
            formatData (list) {
                if (this.initEchart) {
                    this.option.xAxis.data = []
                    this.option.series.forEach(item => {
                        if (item.data.length > 0) {
                            item.data = []
                        }
                    })
                }
                list.forEach(item => {
                    this.option.series[0].data.push(item.fansNew)
                    this.option.series[1].data.push(item.fansAdd)
                    this.option.series[2].data.push(item.fansNew - item.fansAdd)
                    this.option.series[3].data.push(item.fansJoin)
                    this.option.series[4].data.push(item.finish)
                    this.option.xAxis.data.push(item.reportTime)
                })
            }
        }
    }
</script>

<style lang="less">
    .basic-line-chart {
        padding: 0 20px;
        height: 340px;
        min-width: 600px;
        background: white;

        .basic-line-chart-title {
            border-bottom: 1px solid #f0f0f0;
            padding: 15px 0;
        }

        .basic-line-chart-title-no-data {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            color: #909399;
        }

        .account-display-echart {
            width: 600px;
            min-height: 250px;
        }
    }
</style>
